<template>
  <div class="boxs">
    <div class="top">
      <div class="box1">账号登陆</div>
      <div class="box2">输入手机号</div>
    </div>
    <div class="btn">
      <div class="btn1">
        <span>+86</span>
        <input
          type="text"
          name=""
          id=""
          v-model="username"
          @blur="onblur()"
        /><br />
        <span>密码：</span><input type="password" v-model="password" /><br />
        <span>验证码</span
        ><input type="text" v-model="text" @blur="yanzheng()" />
        <div class="t1" @click="fun()">{{ text1 }}</div>
      </div>
      <div class="btn2" @click="fun1()">立即注册</div>
    </div>
  </div>
</template>

<script>
Vue.use(Notify);
import { Notify } from "vant";
import axios from "axios";
//创建axios对象,类似于创建了一个ajax对象
let service = axios.create();
import Vue from "vue";
import { Field } from "vant";
import { Dialog } from "vant";
Vue.use(Field);
export default {
  data() {
    return {
      username: "",
      password: "",
      text: "",
      text1: "点击获取验证码",
    };
  },
  methods: {
    onblur() {
      service({
        url: "http://121.89.205.189:3000/api/user/docheckphone",
        method: "post",
        data: {
          tel: this.username,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          Notify({ type: "primary", message: "用户名可用" });
        } else {
          Notify({ type: "danger", message: "用户名不能用" });
        }
      });
    },
    fun() {
      service({
        url: "http://121.89.205.189:3000/api/user/dosendmsgcode",
        method: "post",
        data: {
          tel: this.username,
        },
      }).then((item) => {
        console.log(item);
      });
    },
    yanzheng() {
      service({
        url: "http://121.89.205.189:3000/api/user/docheckcode",
        method: "post",
        data: {
          tel: this.username,
          telcode: this.text,
        },
      }).then((res) => {
      });
    },
    fun1() {
      service({
        url: "http://121.89.205.189:3000/api/user/dofinishregister",
        method: "post",
        data: {
          tel: this.username,
          password: this.password,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          Dialog.alert({
            title: "注册",
            message: "成功注册",
          })
        }
        this.$router.push({path:'/sign'}).catch(err=>{})
      });
    },
  },
};
</script>

<style scoped>
.top {
  background-color: rgba(0, 0, 255, 0.838);
  height: 200px;
}
.box1 {
  width: 80px;
  height: 60px;
  line-height: 60px;
  color: white;
  padding-left: 290px;
  text-align: center;
  font-size: 14px;
}
.box2 {
  width: 300px;
  height: 100px;
  font-size: 46px;
  margin-left: 30px;
  color: white;
  margin-top: 30px;
}
.btn {
  width: 100%;
  height: 330px;
  position: fixed;
  top: 170px;
  background-color: white;
  border-radius: 40px 40px 0 0;
}
.btn1 {
  height: 210px;
  line-height: 60px;
  margin-top: 40px;
  margin-left: 30px;
}
.btn1 input {
  height: 20px;
  width: 250px;
  border: none;
  border-bottom: 1px solid black;
}
.btn2 {
  height: 50px;
  width: 340px;
  background-color: rgba(0, 0, 255, 0.445);
  margin-left: 20px;
  line-height: 50px;
  text-align: center;
  margin-top: 30px;
}
</style>